<template>
  <div class="my">
    <div class="header">
      <div class="headertop">
        <van-icon name="arrow-left" @click="arr1" />
        <span>个人中心</span>
        <van-icon name="setting-o" @click="toSet" />
      </div>
    </div>
    <div class="main">
      <!-- 个人卡片 -->
      <div class="headerfooter">
        <div class="heacent">
          <div class="h_top">
            <img src="@img/1.jpg" alt @click="tiao" />
            <p>
              <span>你好呀</span>
              <span>绑定手机号</span>
            </p>
          </div>
          <div class="h_foot">
            <div class="h_foo" @click="toBalance">
              <b>0.00</b>
              <p>余额</p>
            </div>
            <div class="h_foo">
              <b>0</b>
              <p>积分</p>
            </div>
            <div class="h_foo">
              <b>4</b>
              <p>优惠卷</p>
            </div>
          </div>
        </div>
        <span class="i_img">签到</span>
      </div>

      <div class="m_top">
        <div class="top11">
          <li>订单中心</li>
          <span>
            查看全部
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
      <div class="i_top">
        <li>
          <svg-icon iconClass="fukuan"></svg-icon>
          <span>代付款</span>
        </li>
        <li>
          <svg-icon iconClass="fahuo"></svg-icon>
          <span>代发货</span>
        </li>
        <li>
          <svg-icon iconClass="shouhuo"></svg-icon>
          <span>待收货</span>
        </li>
        <li>
          <svg-icon iconClass="pingjia"></svg-icon>
          <span>待评价</span>
        </li>
        <li>
          <svg-icon iconClass="tuikuan"></svg-icon>
          <span>售后/退款</span>
        </li>
      </div>
      <div>
        <img src="@img/9.jpg" alt />
      </div>
      <div class="i_center1">
        <div class="cent3">
          <ul v-for="(item, index) in list" :key="index">
            <svg-icon :iconClass="item.icon"></svg-icon>
            <li>
              <span @click="arr3(index)">{{ item.cent }}</span>
              <svg-icon :iconClass="item.lef"></svg-icon>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          icon: "huiyuan",
          cent: "会员中心",
          lef: "left",
        },
        {
          icon: "tuiguang",
          cent: "我的推广",
          lef: "left",
        },
        {
          icon: "yue",
          cent: "我的余额",
          lef: "left",
        },
        {
          icon: "dizhi",
          cent: "地址信息",
          lef: "left",
        },
        {
          icon: "shouchang",
          cent: "我的收藏",
          lef: "left",
        },
        {
          icon: "huijuan",
          cent: "优惠卷",
          lef: "left",
        },
        {
          icon: "kefu",
          cent: "联系客服",
          lef: "left",
        },
      ],
    };
  },
  methods: {
    //跳转到余额页面
    toBalance() {
      //判断是否登录
      if (sessionStorage.getItem("token")) {
        this.$router.push("/balance");
      } else {
        this.$router.push("/login");
      }
    },
    tiao() {
      console.log(1);
    },
    arr3(index) {
      if (index === 0) {
        this.$router.push("/password");
      }
    },
    arr1() {
      this.$router.push("/layout/home");
    },
    // 跳转到订单页
    goOrder(active) {
      active ? active : 0;
      this.$router.push({
        path: "/order",
        query: {
          active,
        },
      });
    },
    //跳转到设置页面
    toSet() {
      this.$router.push("/set");
    },
  },
  mounted() {
    console.log(this);
  },
};
</script>

<style lang="scss">
@import "@css/style.scss";

.my {
  width: 100%;
  height: 100%;
  list-style: none;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: px2rem(50);
    @import "@css/style.scss";
    .headertop {
      width: 100%;
      height: px2rem(50);
      background: rgb(237, 237, 237);
      font-size: $titleSize;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 $padding;
      span {
        font-size: px2rem(15px);
      }
    }
  }
  .main {
    flex: 1;
    overflow-y: auto;
    .headerfooter {
      width: px2rem(375);
      height: px2rem(175);
      background: rgb(254, 252, 251);
      position: relative;
      .heacent {
        width: px2rem(355);
        height: px2rem(171);
        background: rgb(247, 85, 46);
        margin: auto;
        margin-left: px2rem(8);
        margin-top: px2rem(7);
        border-radius: px2rem(10);
        .h_top {
          width: 100%;
          height: px2rem(93);
          font-size: px2rem(15);
          color: #f4d7c6;
          display: flex;
          align-items: center;
          img {
            width: px2rem(60);
            height: px2rem(60);
            border-radius: 50%;
            margin-top: px2rem(15);
            margin-left: px2rem(20);
          }
          p {
            margin-top: px2rem(10);
            margin-left: px2rem(10);
            display: flex;
            flex-direction: column;
          }
        }
      }
      .h_foot {
        .h_foo {
          float: left;
          width: 33%;
          height: px2rem(78);
          text-align: center;
          align-items: center;
          b {
            color: #fff;
            font-size: px2rem(16);
            margin-left: px2rem(40);
          }
          p {
            font-size: px2rem(15);
            color: #ccc;
            margin-left: px2rem(40);
          }
        }
      }
    }
    .m_top {
      .top11 {
        width: 95%;
        height: auto;
        margin: 0 auto;
        display: flex;
        align-items: center;
        background: #ffffff;
        justify-content: space-between;
        li {
          font-size: px2rem(15);
          font-weight: 800;
          display: inline-block;
        }
        span {
          font-size: px2rem(13);
          color: #7c8589;
        }
      }
    }
    .i_top {
      display: flex;
      margin: 0 auto;
      border-bottom: 1px solid #ccc;
      justify-content: space-around;
      padding: px2rem(10) 0;
      .i_ico {
        font-size: px2rem(22);
        flex-basis: 20%;
        margin-top: px2rem(10);
        padding: px2rem(10) 0;
      }
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: px2rem(5) 0;
        justify-content: space-around;
        margin: px2rem(15) 0 0 0;
        span {
          flex: 1;
          font-size: px2rem(12);
          margin-top: px2rem(8);
          color: #26363c;
        }
      }
    }
    .i_center1 {
      .cent3 {
        width: 95%;
        height: auto;
        margin: px2rem(5) auto;
        ul {
          :nth-child(1) {
            float: left;
            margin-top: px2rem(10);
            margin-bottom: px2rem(7);
            clear: both;
          }
          li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: px2rem(15);
            border-bottom: 1px solid #edeeee;
            text-align: center;
            :nth-child(2) {
              font-size: px2rem(15);
              text-align: center;
              margin-top: px2rem(2);
            }
            :nth-child(1) {
              font-size: px2rem(15);
              margin-left: px2rem(10);
              margin-top: px2rem(13);
              text-align: center;
            }
          }
        }
      }
    }
  }
  .element.style {
    width: 20%;
  }
  .svg-icon[data-v-dc49ef06] {
    font-size: px2rem(22);
  }
  .i_img {
    width: px2rem(60);
    height: px2rem(30);
    position: absolute;
    background: #edc319;
    z-index: 999;
    right: px2rem(8);
    display: inline-block;
    top: 23%;
    text-align: center;
    line-height: px2rem(30);
    font-size: px2rem(15);
    color: #3f3b0f;
    border-top-left-radius: px2rem(20);
    border-bottom-left-radius: px2rem(20);
    font-weight: 800;
  }
}
</style>
